<template>
  <el-container style="height: 100vh">
    <Aside/>
    <el-container>
      <el-main style="border-right: 1px solid transparent; border-image: linear-gradient(to bottom, #e0c3fc, #8ec5fc) 1 100%;">
        <!--主页面-->
        <div class="main-content">
          <div class="carousel-container">
            <div class="content">
              <h1 class="text-content">
                为什么要做这样一个知识图谱生成网站呢？
              </h1>
              <hr>
              <br>
              <p class="text-content" style="font-size: 20px">
                答：
                虽然已经存在了如neo4j等知识图谱数据库，并且其提供了操作丰富的ui，但是存在Cypher语言学习门槛。
                如果想得到一个知识图谱，使用者需要完整的学习Cypher语言。并且如果用户需要从自己的数据集导入数据，
                则需要自己编写程序解析数据集，然后将数据集中的数据作为参数传给neo4j。所以总体来说对于对知识图谱
                灵动性需求较低的同学来讲，显然付出与产出是不成正比的。由此VC-kd应运而生。
              </p>
            </div>
            <div class="content">
              <h1 class="text-content">
                VC-kd的优势
              </h1>
              <hr>
              <br>
              <p class="text-content" style="font-size: 20px">
                1. 该网站是完全免费开源的。
                <br>
                2. 用户只需输入三元组格式的xlsx数据集就可得到图表。
                <br>
                3. 用户可以查看自己过去生成过的图谱。
                <br>
                4. 能对图表进行ai分析。
              </p>
              <br>
              <p>
                <el-link style="font-size: 20px"
                         href="https://blog.csdn.net/weixin_74783792/article/details/140843859"
                >
                  如何使用neo4j导入数据集
                </el-link>
              </p>
            </div>
          </div>
          <div class="text-content">
            <h1 class="title">VC-KD</h1>
            <br>
            <el-carousel indicator-position="outside" style="border-radius: 15px; width: 100%">
              <el-carousel-item v-for="(item, index) in items" :key="index">
                <img :src="getImageUrl(item.src)" :alt="item.alt" class="carousel-image"/>
              </el-carousel-item>
            </el-carousel>
            <br>
            <br>
            <div class="content">
              <h1 class="text-content">
                使用说明
              </h1>
              <hr>
              <br>
              <p class="text-content" style="font-size: 20px">
                用户需要传入三元组格式的 .xlsx(excel) 文件，即如下格式:
                <br>
                <img src="D:\Projects\WS_Projects\kd_frontend\src\assets\Snipaste_2024-08-06_00-17-33.png">
                <br>
                第一行为注释，从第二行起为需读入数据，且格式中 relationship 必须处在中间第二列
              </p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Aside from '@/components/aside.vue';
import { ref } from 'vue';

const items = ref([
  { src: 'img.png', alt: 'Image 1' },
  { src: 'img_1.png', alt: 'Image 2' },
]);

const getImageUrl = (imageName) => {
  return new URL(`../assets/HomeImage/${imageName}`, import.meta.url).href;
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

html, body {
  height: 100%;
  margin: 0;
}

.main-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.carousel-container {
  flex: 1;
  margin-right: 30px; /* 跑马灯和文本之间的间距 */
  max-width: 30%;
}

.text-content {
  flex: 1;
  color: black;
  font-weight: 400;
  font-style: normal;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  font-size: 1.875rem; /* 30px */
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
  0 6px 20px rgba(0, 0, 0, 0.19);
  margin: 20px;
  font-family: Arial, sans-serif;
  background: linear-gradient(to right,#8ec5fc, #e0c3fc);
}

.title {
  font-size: 5rem; /* 80px */
  text-align: center;
  font-family: "Pacifico", cursive;
}

// 走马灯样式
.el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.carousel-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 15px;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

// 容器样式
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  border-radius: 10px;
}

.el-container {
  background: linear-gradient(to right, #e0c3fc, #8ec5fc);
  height: 100%;
}

@media (max-width: 768px) {
  .main-content {
    flex-direction: column;
    align-items: center;
    padding: 10px;
  }

  .carousel-container, .text-content {
    width: 100%;
    margin: 0;
  }

  .content {
    font-size: 1.5rem; /* 24px */
    margin: 10px 0;
  }

  .title {
    font-size: 3rem; /* 48px */
  }
}
</style>
